'use client'
import style from './Tutorials.module.scss'
import React, { useEffect, useMemo, useRef } from 'react'

import mapboxgl from 'mapbox-gl';
// import coordtransform from 'coordtransform'
import 'mapbox-gl/dist/mapbox-gl.css';
import Emberbox from '@/utils/mapbox/engine';
import { useDrawCalculate } from './hooks/useDrawCalculate';
import { useGeojson } from './hooks/useGeojson';
import { useLanguage } from './hooks/useLanguage';
import { gcj02towgs84 } from '@/utils/CoordinateConvert/gcj02towgs84';
const page = () => {
    const emberbox = useRef<Emberbox | null>(null)
    const drawCalUint = useDrawCalculate(emberbox)
    const geojsonUnit = useGeojson(emberbox)
    const languageUnit = useLanguage(emberbox)
    const init = () => {
        emberbox.current = new Emberbox('map',
            'pk.eyJ1IjoiZW1iZXJlZWVlIiwiYSI6ImNsbG9tZnhhdTBjOW0zZW9hNndjMDBheWQifQ.2tdcbznsaY7x4V0snpV9ZA'

        )
        let pos: any = [117.17056720719404, 39.12677623217945]
        let relPos: any = gcj02towgs84(pos)
        console.log('relPos', relPos);


        emberbox.current.marks?.addMark(relPos, {
            rotation: 0,
            color: null,
            url: "/svgs/mark_def.svg",
            width: 50,
            height: 50,
        });
        console.log(emberbox.current);

        /**
        // emberbox.current.on('onAreaChange', (n: number) => {
        //     console.log('onAreaChange', n);
        // })
        // emberbox.current.on('onDrawCalculateHover', (e: any) => {
        //     console.log('onDrawCalculateHover', e);
        // })
        // emberbox.current.on('onGeoJsonMouseon', (e: any) => {
        //     console.log('onGeoJsonHover', e.properties
        //     );
        // })
        // emberbox.current.on('onGeoJsonMouseenter', (e: any) => {
        //     console.log('onGeoJsonMouseenter', e.properties
        //     );
        // })
        // emberbox.current.on('onGeoJsonMouseleave', (e: any) => {
        //     console.log('onGeoJsonMouseleave', e.properties
        //     );
        // })
        */
        emberbox.current.on('onGeoJsonMouseenter', (e: any) => {
            console.log('onGeoJsonMouseenter', e.properties
            );
        })

        let bud1 = {
            type: "FeatureCollection",
            features: [
                {
                    type: "Feature",
                    properties: {},
                    geometry: {
                        type: "LineString",
                        coordinates: [],
                    },
                },
            ],
        };
        setTimeout(() => {
            fetch('/json/tianJinHospatio.json').then(
                res => res.json()
            ).then(res => {
                console.log('tinaJinHospatio', res);
                let color = ['blue', 'red', 'aque', '#5eead4', '#d8b4fe', '#fecdd3', '#94a3b8']
                let features = res.buildings.map((item: any, index: number) => {
                    item.properties.color = item.properties['fill-color']
                    // item.properties.color = color[index]
                    return item
                })

                // bud1.features.push(res.buildings[0])

                // var gcj02towgs84 = coordtransform.gcj02towgs84(39.915, 116.404)
                bud1.features = features

                emberbox.current?.geojsonManage?.addJson(bud1)
                console.log(emberbox.current);

            })
        }, 1000)
    }


    useEffect(() => {
        init()
    }, [])



    return (
        <div>
            <div className='mapbox_container' id='map'>

            </div>

            <div className={style.testButtons}>
                <h1>标记测算单元</h1>
                <button onClick={() => drawCalUint.draw()}>draw</button>
                <button onClick={() => drawCalUint.draw_line_string()}>draw_line_string</button>
                <button onClick={() => drawCalUint.drwa_point()}>drwa_point</button>
                <button onClick={() => drawCalUint.select()}>select</button>
                <button onClick={() => drawCalUint.trash()}>trash</button>
                <h1>geojson分区显示</h1>
                <button onClick={() => geojsonUnit.showChina()}>China</button>
                <button onClick={() => geojsonUnit.removeChina()}>hide China</button>
                <button onClick={() => geojsonUnit.showAmerican()}>Amarican</button>
                <button onClick={() => geojsonUnit.removeAmerican()}>hide Amarican</button>
                <button onClick={() => geojsonUnit.addUpway()}>Upway</button>
                <button onClick={() => geojsonUnit.removeUpway()}>hide Upway</button>
                <button onClick={() => geojsonUnit.addIndoor()}>indoor</button>
                <button onClick={() => geojsonUnit.removeIndoor()}>hide indoor</button>
            </div>
            <div className={style.language}>
                <button onClick={() => languageUnit.chinese()} >zh</button>
                <button onClick={() => languageUnit.english()} >en</button>
                <button onClick={() => languageUnit.franches()} >fr</button>
            </div>
        </div>
    )
}

export default page





